<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" left-icon="left" title="行程评价" @clickLeft="back"></uni-nav-bar>
	<view class="container">
		<uni-forms class="form uni-padding-wrap" ref="form" :modelValue="formData" label-width='auto':rules="rules">
		<view class="uni-padding-wrap pt30 pb130">
			<view class="is-flex ac line-h70 mb40">
				请对本次线路体验评分&nbsp;&nbsp;<uni-rate :touchable="false" max="5" v-model="formData.travelLinesRecommendAddDto.recommendStar" @change="rateChange" />
			</view>
			<view class="w100 mb40">
				<view class="">评价内容</view>
				<view class="w100">
					<textarea maxlength="1000" class="uni-input font-28 text-right p100" placeholder="请输入对本次的线路评价" v-model="formData.travelLinesRecommendAddDto.recommendContent" />
				</view>
			</view>
			<view class="is-flex ac line-h70 mb40">
				请对本次行程领队评分&nbsp;&nbsp;<uni-rate :touchable="false" max="5" v-model="formData.travelLeaderRecommendAddDto.recommendStar" />
			</view>
			<view class="w100 mb40">
				<view class="">评价内容</view>
				<view class="w100">
					<textarea maxlength="1000" class="uni-input font-28 text-right p100" placeholder="请输入对本次的行程评价" v-model="formData.travelLeaderRecommendAddDto.recommendContent" />
				</view>
			</view>
			<view class="">
				<uni-data-checkbox multiple v-model="formData.travelLeaderRecommendAddDto.showUserDetail" :localdata="showUserDetails"></uni-data-checkbox>
			</view>
		</view>
		</uni-forms>
		<view class="fixed-bottom-wrap">
			<view class="schdule-card uni-flex">
				<view class="flex-item w100 sign bg-green" @click="subForm">
					<text class="tc">确认提交</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	export default {
		components: {
			
		},
		data() {
			return {
				starValue:2,
				maxStar:5,
				showUserDetails:[ {
					text: '将本次评分设置为匿名',
					value: 'T'
				}],
				Data:{},
				formData:{
					travelLeaderRecommendAddDto:{
						showUserDetail:'F',
					},
					travelLinesRecommendAddDto:{},
				},
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: ' ',
						}, ],
					},
				},
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		watch: {

		},
		onShow() {

		},
		onLoad(option) {
			if(option.param){
				let params = JSON.parse(decodeURIComponent(option.param));
				this.Data = params.data;
			}	
		},
		methods: {
			back(){
				uni.navigateTo({
					url:'/pages/schdule/schdule'
				})
			},
			// 页面跳转
			navgetTo(page, param, type) {
				// let userLoginFlag = storageUtil.getStorageData("isLogin");
			
				// if (!userLoginFlag || userLoginFlag == '') {
				// 	this.popShowHandle();
				// 	return;
				// }
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			rate1Change(e){
				this.formData.travelLinesRecommendAddDto.recommendStar = e.detail.value();
			},
			rate2Change(e){
				this.formData.travelLeaderRecommendAddDto.recommendStar = e.detail.value();
			},
			subForm(){
				let _this = this;
				this.formData.travelLeaderRecommendAddDto.showUserDetail = this.formData.travelLeaderRecommendAddDto.showUserDetail.toString();
				this.formData.travelLinesRecommendAddDto.showUserDetail = this.formData.travelLeaderRecommendAddDto.showUserDetail.toString();
				this.formData.travelLeaderRecommendAddDto.leaderUserId=_this.Data.userId;
				this.formData.travelLeaderRecommendAddDto.travelLinesId=_this.Data.travelLinesId;
				this.formData.travelLeaderRecommendAddDto.travelItineraryId=_this.Data.id;
				this.formData.travelLeaderRecommendAddDto.orderNo=_this.Data.orderNo;
				this.formData.travelLinesRecommendAddDto.travelLinesId=_this.Data.travelLinesId;
				this.formData.travelLinesRecommendAddDto.travelItineraryId=_this.Data.id;
				this.formData.travelLinesRecommendAddDto.orderNo=_this.Data.orderNo;
				api.createrecommendItineraray(_this.formData).then(res => {
					if(res.code === 0){
						_this.navgetTo('pages/schdule/schdule_detail',_this.Data.id);
					}
					
				})	
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
	}
	
	.bottom-wrap{
		position: relative;
		top: -60rpx;
	}
	
	.is-flex{
		display: flex;
	}
	
	.xf-wrap {
		position: relative;
		top: -60rpx;
		overflow: hidden;
	}

	.box-shadow {
		box-shadow: 2rpx 2px 2rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}

	.sticky {
		height: 85rpx;
		line-height: 85rpx;
		background-color: #ffffff;
		width: 100%;
		color: #888;
		position: sticky;
		top: -1rpx;
		left: 0;
		right: 0;
		z-index: 999;
		text-align: center;
	}

	.sticky text {
		color: $uni-text-color-light-blue;
		font-weight: bold;
		padding: 10rpx 15rpx;
	}
	.sticky text.active{
		color: $uni-text-color-blue;
		border-bottom: 2px solid $uni-text-color-blue;
	}
	.xc-desc{
		text{
			margin-bottom: 30rpx;
			display: block;
		}
	}
	.xc-info{
		text{
			margin-left: 15rpx;
		}
		.map-text{
			color: $uni-text-color-blue;
			font-size: 16rpx;
			padding: 5rpx 10rpx;
			border: 1px solid $uni-text-color-blue;
			border-radius: 10rpx;
		}
	}
	.pb130{
		padding-bottom: calc( 130rpx + max(env(safe-area-inset-bottom),20px));
	}
	.share-reward{
		.color-black{
			display: block;
			margin-bottom: 20rpx;
		}
		.is-flex{
			align-items: flex-start;
		}
		.color-gray{
			line-height: 1.8;
			text-align: justify;
			margin-left: 20rpx;
		}
	}
	.fixed-bottom-wrap {
		position: fixed;
		z-index: 111;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
	}
	.schdule-card{
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: 60rpx;
		border-top: 1px solid #f8f8f8;
		padding-bottom: max(env(safe-area-inset-bottom),20px);
		text{
			display: block;
		}
		.sign{
			height: 100%;
			color: $uni-text-color-white;
			font-size: 32rpx;
			line-height: 100%;
			text{
				line-height: 100rpx;
			}
		}
	}
	
</style>